<!DOCTYPE html>
<p> {{ 'FUSION.AREA' | translate }}:
  <pretty value="ct.util.calculateValue(ct.data.global_upgrades.fusion_area.power.base,
            ct.data.global_upgrades.fusion_area.power,
            ct.state.player.global_upgrades_current.fusion_area)"></pretty> m<sup>2</sup> 等级 {{ct.state.player.global_upgrades_current.fusion_area}}</p>
{{ 'FUSION.AMOUNT' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.util.nextAmount(ct.state.player, 'adjustIndex', ct.adjustAmount)">
  {{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<br> {{ 'FUSION.LEVEL' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'fusion_area', ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.fusion_area === ct.state.player.global_upgrades.fusion_area">
+{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'fusion_area', -ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.fusion_area === 1">
-{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<p> {{ 'FUSION.BAND' | translate }}:
  <pretty value="ct.util.calculateValue(ct.data.global_upgrades.fusion_bandwidth.power.base,
            ct.data.global_upgrades.fusion_bandwidth.power,
            ct.state.player.global_upgrades.fusion_bandwidth)"></pretty>
</p>
<div>
  <h2>{{ 'UPGRADE' | translate }}</h2>
  <div class="row">
    <div ng-repeat="key in ct.visibleUpgrades()"
         ng-click="ct.upgradeService.buyGlobalUpgrade(key, ct.state.player)"
         class="col-xs-12 btn btn-default"
         ng-class="{disabled: !ct.upgradeService.canBuyGlobalUpgrade(key, ct.state.player)}">
      <span class="pull-left">
    {{ 'FUSION.LEVEL' | translate }}: {{ct.state.player.global_upgrades[key]}} {{ct.data.global_upgrades[key].name}}: {{ct.data.global_upgrades[key].description}}
  </span>
      <span class="pull-right"
            ng-repeat="(resource, price) in ct.data.global_upgrades[key].price">
    <pretty value="price*ct.upgradeService.priceMultiplier(key, ct.state.player)"></pretty> &nbsp;
    <get-html value="resource"></get-html>
  </span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <h2>{{ 'FUSION.BEAM' | translate }}</h2>
      <fusion-select source="beam"
                     get-capacity="ct.getCapacity(resource, player)"></fusion-select>
      <h2>{{ 'FUSION.TARGET' | translate }}</h2>
      <fusion-select source="target"
                     get-capacity="ct.getCapacity(resource, player)"></fusion-select>
    </div>
    <div class="col-xs-6">
      <div ng-if="!ct.getProductIsotope(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)">
        <h2>{{ 'FUSION.NO_PRODUCT' | translate }}</h2>
      </div>
      <div ng-if="ct.getProductIsotope(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)">
        <h2>{{ 'FUSION.PRODUCT' | translate }}</h2>
        <p>{{ 'FUSION.ISOTOPE' | translate }}: {{ct.getProductIsotope(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)}}</p>
        <p>{{ 'FUSION.ENERGY' | translate }}:
          <pretty value="ct.getProductEnergy(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)"></pretty> eV</p>
        <p>{{ 'FUSION.BARRIER' | translate }}:
          <pretty value="ct.getCoulombBarrier(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)"></pretty> eV</p>
        <p>{{ 'FUSION.YIELD_P' | translate }} %:
          <pretty value="ct.getYieldPercent(ct.state.player)*100"></pretty>
        </p>
        <p>{{ 'FUSION.YIELD_TOTAL' | translate }}:
          <pretty value="ct.getYield(ct.state.player)"></pretty>
        </p>
        <p>{{ 'FUSION.TOTAL_TIME' | translate }}:
          <pretty value="ct.getTime(ct.state.player)"></pretty>s</p>
      </div>
    </div>
  </div>
  <div ng-if="ct.getProductIsotope(ct.state.player.fusion[0].beam.name, ct.state.player.fusion[0].target.name)">
    <h2>{{ 'FUSION.REACTION' | translate }}</h2>
    <span ng-bind-html="ct.util.trustHTML(
              ct.format.reactionFormat(1,
                                        ct.getFusionReaction(ct.state.player),
                                        ct.state.player))"></span>
    <br>
    <button type="button"
            class="btn btn-default"
            ng-if="!ct.state.player.fusion[0].active"
            ng-disabled="ct.getYield(ct.state.player) === 0"
            ng-click="ct.state.player.fusion[0].active = true">
{{ 'FUSION.LOAD' | translate }}
</button>
    <button type="button"
            class="btn btn-default"
            ng-if="ct.state.player.fusion[0].active"
            ng-click="ct.stopFusion(ct.state.player, ct.state.player.fusion[0])">
{{ 'FUSION.UNLOAD' | translate }}
</button>
    <br>
    <label>{{ 'FUSION.RUN' | translate }}
   <input type="checkbox"
        ng-model="ct.state.player.fusion[0].run"
        ng-disabled="!ct.state.player.fusion[0].active">
</label>
    <div ng-if="ct.getTime(ct.state.player) > 1">
      <p> {{ 'FUSION.LOAD' | translate }}:
        <pretty value="ct.state.player.fusion[0].eV"></pretty>/
        <pretty value="ct.getFusionReaction(ct.state.player).reactant.eV"></pretty> eV</p>
      <progress value="{{ct.state.player.fusion[0].eV/ct.getFusionReaction(ct.state.player).reactant.eV*100}}"
                max="100"></progress>
    </div>
  </div>
